<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D可视化</title>
</head>
<body>
    
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script>
<script>
    // 搭建环境
    const scence = new THREE.Scene()

    // 搭建相机
    const camera =  new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000)
    // 距离视图有一定的距离 不设置距离默认就是(0,0,0)
    camera.position.z = 10

    // 生成渲染
    const renderer = new THREE.WebGLRenderer()
    // 渲染的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 渲染的背景颜色
    renderer.setClearColor(0x00FFFF, .5)
    // 追加倒页面中
    document.body.appendChild(renderer.domElement)

    // 插入坐标
    const axisHelper = new THREE.AxisHelper(3) // 生成辅助坐标实列
    scence.add(axisHelper)
    // 渲染
    renderer.render(scence, camera)


    // 长方形
    const geometry = new THREE.BoxGeometry(1, 2, 3) // 长 宽 高
    // 长方形的颜色
    const material = new THREE.MeshBasicMaterial({ color: 'red' })
    const cube = new THREE.Mesh(geometry, material)
    //  环境中插入坐标
    scence.add(cube) // 插入长方形
    renderer.render(scence, camera)
</script>
</html>